<template>
    <div class="nominate-box">
            <van-sidebar class="nominate">
                <van-sidebar-item  title="编辑推荐"/>
            </van-sidebar>
            <van-grid 
            column-num="3"
            :center="false"
             >
                <van-grid-item 
               
                v-for="item in list" 
                :key="item.id"
                :to="{name:'id', query:{id:item.id} }"
                 
                >
                    <van-image :src="item.coverImgUrl" />

                    <div class="taxt">{{item.name}}</div>
                </van-grid-item>
                <router-view />
            </van-grid>

            <van-sidebar class="nominate">
                <van-sidebar-item title="最新音乐"/>
            </van-sidebar>
            <div v-for="item in data" :key="item.id">
                <van-cell :title="item.name" icon="" class="song" :label="`${item.song.artists[0].name} -- ${item.name}`">
                <template #right-icon>
                    <van-icon name="play-circle-o" class="search-icon" />                  
                </template>
                </van-cell>
            </div>
            <div class="base">
                <div class="logo">网易云音乐</div>
                <div class="app">打开APP, 发现更多精彩 ></div>
            </div>
    </div>
</template>

<script>
import evetBus from '../../../../event-bus/index'
import {mapState, mapActions} from 'vuex'
export default {
    computed : {
        ...mapState('rcomm', ['info']),
        list () {
            return this.info.map(item => ({
                 id: item.id,
                 name: item.name, // 歌曲名
                 maxBr: item.song.privilege.downloadMaxbr, // 最大音质
                 alias: item.song.alias[0], // 别名
                 artists: item.song.artists, // 歌手数组
                 albumName: item.song.album.name, // 专辑名
            }))     
        },

    list () {
        if (!evetBus.playlist.data) {
            return [];
        }
      return evetBus.playlist.data.playlists
    },
    // data () {
    //     if (!evetBus.newSonglist.data) {
    //         return [];
    //     }
    //     return evetBus.newSonglist.data.result
    // }
  },
    methods : {
        ...mapActions('rcomm', ['updateInfo'])
    },

    created () {
        this.updateInfo()
        evetBus.$emit('updateplaylist');
        // evetBus.$emit('updateNewSonglist') 
  },
//   methods:{
//       fn (id) {
//           evetBus.$emit('musicdetails')
//       }
//   }

   
     
    
    // data () {
    //     return {
    //         res:[],
    //         music:[]
    //     }
    // },
//    async created() {
//        let res = await this.$req({
//            method:'get',
//            url:'/personalized?limit=6'
//        })
//        this.res = res.data.result

//        let music = await this.$req({
//            method:'get',
//            url:'/personalized/newsong'
//        })
     
//        this.music = music.data.result
//     }
}
</script>
<style scoped>
     .base {
        width: 100%;  
        align-items: center;
        display:flex;
        flex-direction: column 
     }
     .base .logo {
        font-size:40px;
        
     }
     .taxt {
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin: 4px;
        font-size: 12px;
     }
     .base .app {
         margin-top: 20px;
         margin-bottom: 20px;
         width: 250px;
         height: 40px;
         border:1px solid red;
         align-items: center;
         display:flex;
         justify-content: center;
         border-radius: 20px;
     }
    .song {
        font-size:20px
    }
    .nominate-box {
        width: 100%;
        height: 100vh;
        margin:0;
        flex:1;
    }
    .nominate {
        width: 150PX;
    }
    .van-sidebar-item{
        font-size:18PX
    }
   
    
    .subtitle {
       margin-left: 8px;
       margin-bottom: 8px;
       font-size: 18px;
       box-sizing: border-box;
    }
</style>

